<!-- 来源解析 -->
<template>
	<transition name="show">
		<div class="route">
			<div class="my-wrap">
				<div>
					<div>
						<div class="pop">
							<p class="tit"><span>污染物</span></p>
							<div class="main">
								<tab-btn @constituencyEvent="getConstituency" :serverData="serverPop"></tab-btn>
							</div>							
						</div>
						<div class="city">
							<p class="tit"><span>城市</span></p>
							<div class="main">
								<tab-btn @constituencyEvent="getConstituency" :serverData="serverCity"></tab-btn>
							</div>
						</div>
						<div class="false">
							<p class="tit"><span>方向</span></p>
							<div class="main">
								<tab-btn @constituencyEvent="getConstituency" :serverData="serverFalse"></tab-btn>
							</div>
						</div>

						<div class="time">
							<p class="tit"><span>时间</span></p>
							<div class="main">
								<p @click="c_timeClick">{{time}}</p>
							</div>
						</div>

					</div>
				</div>
			</div>
			
			<open-close @getGis="getGIS"></open-close>
  			<mt-datetime-picker ref="picker" type="date" v-model="timePicker" @confirm="c_timeEnter"></mt-datetime-picker>

		</div>
	</transition>
</template>

<script>

import IScroll from 'iscroll'
import openClose from '../openClose/openClose' // 弹出层打开关闭按钮
import tabBtn from '../tabBtn/tabBtn'          // 表格单选
import GIS from '../GIS.js'                 // GIS

export default {
	data(){
		return {
			serverPop: [
				{
					tab: 'PM2.5',
					code: 'pop-pm25'
				},
				{
					tab: 'PM10',
					code: 'pop-pm10'
				},				
				{
					tab: 'CO',
					code: 'pop-co'
				},
				{
					tab: 'CO2',
					code: 'pop-co2'
				},
				{
					tab: 'O3',
					code: 'pop-o3'
				}				
			],
			serverCity: [
				{
					tab: '北京',
					code: 'city-北京01'
				},
				{
					tab: '天津',
					code: 'city-天津02'
				},				
				{
					tab: '青海',
					code: 'city-青海03'
				},
				{
					tab: '石家庄',
					code: 'city-石家庄04'
				},
				{
					tab: '大连',
					code: 'city-大连05'
				},	
				{
					tab: '青岛',
					code: 'city-青岛06'
				},
				{
					tab: '甘肃',
					code: 'city-甘肃07'
				},				
				{
					tab: '兰州',
					code: 'city-兰州08'
				},
				{
					tab: '广东',
					code: 'city-广东09'
				},
				{
					tab: '云南',
					code: 'city-云南10'
				}
			],
			serverFalse: [
				{
					tab: '正向',
					code: 'false-正'
				},
				{
					tab: '反向',
					code: 'false-反'
				}
			],
			pop: 'pm25',
			city: '北京01',
			false: '反',
			time: null,
			timePicker: null
		}
	},
	components: {   // 组件
		openClose, tabBtn
	},
	mounted(){   // 被挂载
		let myScroll = new IScroll('.my-wrap', {click: true, taps: true})

		let date = new Date()
		date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
		this.time = date
		this.timePicker = date

	},
	methods: {   // 函数
		getConstituency(code){   // 获取子组件返回的值
			this[code.split("-")[0]] = code.split("-")[1]  // 获取值做记录
			console.log(this.pop, this.city, this.false)
		},
		getGIS(){  // 确定单击渲染GIS
			console.log("来源解析")
			GIS.routeGis("url") // 来源解析
		},
	    c_timeClick(){    // 打开时间选择器
	        this.$refs.picker.open()
	    },
	    c_timeEnter(){    // 时间选择器选中
			let n = this.timePicker.getFullYear()
			let y = this.timePicker.getMonth() + 1
			let r = this.timePicker.getDate()
			this.time = n + "-" + y + "-" + r
	    }
	},
	computed: {  // 计算属性
		getTime(){

		}
	}
}

</script>


<style lang="less" scoped>

.show-enter{
	transform: translateX(100%);
	opacity: 0;
}
.show-enter-to{
	transform: translateX(0%);
	opacity: 1;
}
.show-leave{
	transform: translateX(0%);
	opacity: 1;
}
.show-leave-to{
	transform: translateX(-100%);
	opacity: 0;
}

.show-enter-active,.show-leave-active{
    transition: all 0.5s;
}



.route{
	width: 100%;
	height: 100%;
	position: fixed;
	background: rgba(0,0,0,.7);
	top: 0;
	left: 0;	
	z-index: 101;
	overflow: hidden;
	.my-wrap{
		height: calc(~"100% - 130px");
		overflow: hidden;
		.main{
			padding: 0 20px;
		}
		.pop{
			padding: 50px 30px 30px 30px;
			.tit{
				span{
					color: #fff;
					font-size: 14px;
					font-family: Microsoft YaHei;
					display: inline-block;
					line-height: 22px;
					height: 22px;
					border-radius: 12px;
					border: 1px solid rgba(255,255,255,0.3);
					padding: 0 10px;
				}
			}
		}
		.city{
			padding: 0px 30px 30px 30px;
			.tit{
				span{
					color: #fff;
					font-size: 14px;
					font-family: Microsoft YaHei;
					display: inline-block;
					line-height: 22px;
					height: 22px;
					border-radius: 12px;
					border: 1px solid rgba(255,255,255,0.3);
					padding: 0 10px;
				}
			}
		}
		.false{
			padding: 0px 30px 30px 30px;
			.tit{
				span{
					color: #fff;
					font-size: 14px;
					font-family: Microsoft YaHei;
					display: inline-block;
					line-height: 22px;
					height: 22px;
					border-radius: 12px;
					border: 1px solid rgba(255,255,255,0.3);
					padding: 0 10px;
				}
			}
		}
		.time{
			padding: 0px 30px 30px 30px;
			.tit{
				span{
					color: #fff;
					font-size: 14px;
					font-family: Microsoft YaHei;
					display: inline-block;
					line-height: 22px;
					height: 22px;
					border-radius: 12px;
					border: 1px solid rgba(255,255,255,0.3);
					padding: 0 10px;
				}
			}
			.main{
				padding: 10px 20px;
				p{
					color: #fff;
					font-size: 16px;
					line-height: 30px;
					height: 30px;
					border: #fff solid 1px;
					text-align: center;
					border-radius: 16px;
				}
			}
		}
	}
}


</style>